<template>
  <div class="custom-input">
    <input :style="{ width: width }" :maxlength="maxlength" :placeholder="placeholderStr" :type="type" :disabled="isDisabled" class="input" :value="value" @input="handleInput($event)">
    <text class="unit">{{ unit }}</text>
  </div>
</template>

<script>
export default {
  mode: {
    event: 'input',
    prop: 'value'
  },
  props: {
    width: {
      type: String,
      default: ''
    },
    placeholderStr: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    unit: {
      type: String,
      default: ''
    },
    value: {
      require: true
    },
    maxlength: {
      type: Number,
      default: 140
    }
  },
  data() {
    return {}
  },
  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-input {
  color: #000;
  width: 100%;
  height: 99rpx;
  box-sizing: border-box;
  border: 1px solid rgba(163, 163, 163, 1);
  border-radius: 24rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50rpx;
  .input {
    width: 50%;
  }
  .unit {
    color: rgba(51, 51, 51, 1);
    font-size: 25rpx;
  }
}
</style>
